window.onload = buttons;

function buttons()
{
	setNewTime();
	changeColor();

	var button1 = document.getElementById("button1");
	button1.onclick = calculate;

	var button2 = document.getElementById("imageButton");
	button2.onclick = imageChange;

	var button3 = document.getElementById("colorTabCreate");
	button3.onclick = createColortab;

	document.getElementById("colorTabdelete").onclick = deleteColorTab;

	document.getElementById("button2").onclick = stopChangeColor;

	document.getElementById("button3").onclick = boxMove;

	document.getElementById("button4").onclick = guessGame;

	document.getElementById("button5").onclick = playAgain;

	document.getElementById("guessbutton").onclick = guessLetter;

	document.getElementById("button6").onclick = newGame;
}



//var MONTH = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var MONTH = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
function setNewTime()
{
	var time = new Date();
	var timeStr = MONTH[time.getMonth()] + " " + time.getDate() + "日" + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
	document.getElementById("ctime").innerHTML = timeStr;
	setInterval(setNewTime, 1000);
}


function calculate()
{
	var x = document.getElementById("x").value;
	var y = document.getElementById("y").value;
	var sum = parseInt(x) + parseInt(y);
	document.getElementById("sum").value = sum;
}



function imageChange()
{
	var nowImage = document.getElementById("image");
	var array = nowImage.src.split("/");
	var string = array[array.length - 1];
	if(string == "1.jfif")
	{
		nowImage.src = "2.jfif";
	}else{
		nowImage.src = "1.jfif";
	}
}



var colorNames = ["maroon", "red", "orange", "yellow", "olive", "purple", "fuchsia", "white","lime",
	"green", "navy", "blue", "aqua", "teal", "black", "silver", "gray"];

function createColortab()
{
	var printColorTab = document.getElementById("colorTable");

	for(i = 0; i < colorNames.length; i++)
	{
		var newColorTab = document.createElement("div");
		newColorTab.setAttribute("class", "creatColorbox");
		newColorTab.innerHTML = colorNames[i];
		newColorTab.style.display = "inline-block";
		newColorTab.style.width = "60px";
		newColorTab.style.padding = "10px";
		newColorTab.style.backgroundColor = colorNames[i];
		printColorTab.appendChild(newColorTab);
	}
}

function deleteColorTab()
{
	var parent = document.getElementById("colorTable");
	var child = parent.childNodes;		//获取它的所有子节点。

	while(child[0])		//使用 while 循环逐一移除子节点，直到没有子节点为止。
	{
		parent.removeChild(child[0]);
	}
}



var id;
function changeColor()
{
	id = setInterval(textColorChange, 1000);
}

function textColorChange()
{
	var getElement = document.getElementById("target");
	getElement.style.color = (getElement.style.color == "red")?"blue":"red";
	getElement.style.backgroundColor = (getElement.style.backgroundColor == "yellow")?"green":"yellow";
}

function stopChangeColor()
{
	clearInterval(id);
}



function boxMove()
{
	var getElement = document.getElementById("animate");
	var location = 0;
	var id = setInterval(frame, 5);

	function frame()	//它直接继承了 boxMove 的作用域，因此可以直接访问 location 和 id。不需要在全局范围定义这些变量，避免了变量污染和意外冲突。这样定义的 frame 是局部函数，每次调用 boxMove 都会创建一个新的 frame，使得每次调用互不影响。
	{
		if(location == 350)
		{
			clearInterval(id);
		}else{
			location++;
			getElement.style.top = location + "px";
			getElement.style.left = location + "px";
		}
	}
}



var guessTime = 0;
var computerNumber = Math.floor(Math.random() * 100 + 1);
function guessGame()
{
	var result = " ";
	input = parseInt(document.getElementById("user").value);
	guessTime++;

	if(input == computerNumber)
	{
		result = "你猜对了";
	}else if(input < computerNumber){
		result = "猜小了";
	}else{
		result = "猜大了";
	}

	document.getElementById("guess").value = guessTime;
	document.getElementById("result").value = result;
	document.getElementById("check").value = computerNumber;
}

function playAgain()
{
	guessTime = 0;
	document.getElementById("guess").value = " ";
	document.getElementById("result").value = " ";
	document.getElementById("check").value = " ";
	document.getElementById("user").value = " ";
	computerNumber = Math.floor(Math.random() * 100 + 1);
}



//constants
var POSSIBLE_WORDS = ["obdurate", "verisimilitude", "defenestrate", "obsequious", "dissonant", "today", "idempotent"];
var MAX_GUESSES = 6;

//global variables
var guesses = " ";	//表示玩家已经猜过的字母集合。
var guessCount = MAX_GUESSES;	//表示玩家剩余的猜测次数。
var word;	//表示要玩家猜的目标单词。

function newGame()
{
	randomNumber = parseInt(Math.random() * POSSIBLE_WORDS.length);
	word = POSSIBLE_WORDS[randomNumber];

	guessCount = MAX_GUESSES;
	guesses = " ";
	var guessbutton = document.getElementById("guessbutton");
	guessbutton.disabled = false;
	updatePage();
}

function updatePage()
{
	var clueString = " "; //用来拼接并存储当前的提示字符串。 显示当前单词的已猜部分（正确的字母）和未猜部分（用下划线 _ 表示）。
	for(var i = 0; i < word.length; i++)
	{
		var letter = word.charAt(i); //逐个取出单词中的每个字母
		if(guesses.indexOf(letter) >= 0) //猜中了, guesses 是一个字符串：它包含玩家已经猜过的所有字母.letter 是一个单个字符：它是目标单词 word 中的某个字母。
		{
			clueString += letter + " "; // 将猜到的字母加到提示字符串
		}else{		//没猜到
			clueString += "_ "; // 未猜到的位置用下划线表示
		}
	}
	document.getElementById("clue").innerHTML = clueString; // 更新提示区域

	var guessArea = document.getElementById("guessstr");
	if(clueString.indexOf("_") < 0)
	{
		guessArea.innerHTML = "你赢了";
	}else if(guessCount == 0)
	{
		guessArea.innerHTML = "你输了";
	}else
	{
		guessArea.innerHTML = "Guesses: " + guesses;
	}

	document.getElementById("hangmanpic").src = "hangman" + guessCount + ".gif";
}

function guessLetter()
{
	var inputLetter = document.getElementById("hguess").value;
	if(guesses.indexOf(inputLetter) >= 0)	//用于检查玩家输入的字母是否已被猜过
	{

		return;
	}else{
		guesses += inputLetter;	//将当前猜测的字母添加到 guesses 中，便于后续逻辑判断该字母是否已被猜过，避免重复处理。
		guessCount--;
	}

	updatePage();
}